<template>
<moyu-card title="转换详情">
  <template #option>
    <el-button type="primary" @click="submitTransInfo">提交</el-button>
  </template>
  <template #content>
    <el-form ref="transForm" label-position="top" :model="trans" :rules="rules">
      <el-form-item prop="transName" label="转换名称">
        <el-input v-model="trans.transName"/>
      </el-form-item>
      <el-form-item prop="inputId" label="输入数据源">
        <el-input v-model="trans.inputId"/>
      </el-form-item>
      <el-form-item prop="transSql" label="查询语句">
        <sql-editor style="width: 100%; min-height: 100px; max-height: 400px" v-model="trans.transSql"/>
      </el-form-item>
      <el-form-item prop="outputId" label="输出数据源">
        <el-input v-model="trans.outputId"/>
      </el-form-item>
      <el-form-item prop="tableName" label="表名称">
        <el-input v-model="trans.tableName"/>
      </el-form-item>
      <el-form-item prop="remark" label="备注">
        <el-input type="textarea" rows="4" v-model="trans.remark"/>
      </el-form-item>
    </el-form>
  </template>
</moyu-card>
</template>

<script setup>

import MoyuCard from "@/components/MoyuCard/MoyuCard.vue";

import {defineProps, computed} from 'vue'
import SqlEditor from "@/components/SqlEditor/SqlEditor.vue";
import {postTransInfo} from "@/api/kettle/trans";
const emits = defineEmits(['update:modelValue'])
const props = defineProps({
  modelValue: {
    default: []
  },
  rules: {
    default: []
  }
})
const trans = computed({
  get(){
    return props.modelValue
  },
  set(val){
    emits('update:modelValue', val)
  }
})

/**
 * 更新或保存
 */
const submitTransInfo = function () {
  postTransInfo(trans.value).then(value=>{
    console.log(value)
  })
}



</script>

<style scoped>

</style>